@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-resize-box' !default;

.#{$prefix} {
  display: flex;
  box-sizing: border-box;
  user-select: auto;

  &-pane {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;

    &--collapsed {
      .#{$prefix}-separator-content {
        width: 0;
        border: none;
      }

      .#{$prefix}-toggle {
        right: -13px;

        svg[class^=hi-v4-icon] {
          transform: rotate(180deg);
        }
      }
    }
  }

  &-separator {
    position: relative;
    height: 100%;
    cursor: col-resize;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    &-content {
      box-sizing: border-box;
      width: 6px;
      height: 100%;
      border-right: 2px solid use-color('gray', 300);
    }

    &:hover {
      .#{$prefix}-separator-content {
        border-right-color: use-color('brandblue', 300);
      }

      + .#{$prefix}-toggle {
        width: 10px;
      }
    }

    &--collapsed {
      width: 0;
      cursor: default;
    }
  }

  &-toggle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 60px;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    border-start-end-radius: 16px 8px;
    border-end-end-radius: 16px 8px;
    border: 1px solid use-color('gray', 300);
    border-left: none;
    cursor: pointer;
    color: use-color('gray', 600);
    background-color: #fff;

    svg[class^=hi-v4-icon] {
      margin-left: -4px;
    }
  }
}
